<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <title>成功页面</title>
</head>
<body>
<table id="query11" class="pagehelper">
    <tr>
        <td>城市名称</td>
        <td>城市编号</td>
    </tr>
</table>

<input type="button" value="上一页" onclick="shang()">
<input type="text" name="pageNumber" id="pageNumber" value="1">
<input type="button" value="下一页" onclick="xia()">
</body>
<script type="text/javascript">

var pageNumber = $("#pageNumber").val();
$(document).ready(function(){
        findshuju();
    });
function findshuju(){
    var i=1;
    var j =10;
    var aaa = JSON.stringify({"pageNum":i,"pageSize":j});
    /* pageNum  pageSize
         ?pageNum=1&pageSize=2*/
    $.get("/citys?pageNum="  + i + "&pageSize=" + j,
        function(data){
            $.each(data,function(){
                var tr  = $("<tr/>");
                $("<td />").html(this.chinese).appendTo(tr);
                $("<td/>").html(this.adcode).appendTo(tr);
                $("#query11").append(tr);
            })
        },"json");
}
function shang() {
    if (pageNumber === 1) {
        console.log("当前已是最新页");
        return;
    }
    pageNumber--;
    var i=pageNumber;
    var j =10;
    $.get("/citys?pageNum="  + i + "&pageSize=" + j,
        function(data){
            $(".pagehelper").empty();
            $.each(data,function(){
                var tr  = $("<tr/>");
                $("<td/>").html(this.chinese).appendTo(tr);
                $("<td/>").html(this.adcode).appendTo(tr);
                $("#query11").append(tr);
            })
        },"json");
}
function xia() {
    pageNumber++;
    var i=pageNumber;
    var j =10;
    $.get("/citys?pageNum="  + i + "&pageSize=" + j, function(data){
            $(".pagehelper").empty();
            $.each(data,function(){
                var tr  = $("<tr/>");
                $("<td/>").html(this.chinese).appendTo(tr);
                $("<td/>").html(this.adcode).appendTo(tr);
                $("#query11").append(tr);
            })},"json");
}
</script>
</html>